<template>
  <div class="header">
    <el-row type="flex" align="middle">
      <el-col :span="1">
        <el-button id="back" type="primary" icon="el-icon-back" @click="$router.go(-1)" circle size="medium" />
      </el-col>
      <el-col :span="4">
        <div class="grid-content">
          <canvas
              ref="canvas"
              height="45px"
              width="250px"
              @click="goToHome"
              style="cursor: pointer"/>
        </div>
      </el-col>
      <el-col :span="10" :push="3">
        <div class="grid-content" v-if="!admin">
          <el-input
              placeholder="搜索..."
              v-model="search"
          >
            <template v-slot:append>
              <el-button icon="el-icon-search" @click="startSearch"/>
            </template>
          </el-input>
        </div>
      </el-col>
      <el-col :span="2" :push="6">
        <el-avatar class="avatar" v-if="username">{{ username[0].toUpperCase() }}</el-avatar>
        <el-avatar
            class="avatar"
            v-else
            icon="el-icon-user-solid"/>
      </el-col>
      <el-col :span="2" :push="5">
        <el-dropdown @command="commandHandle" trigger="click">
          <el-button icon="el-icon-more" circle/>
          <el-dropdown-menu slot="dropdown">
            <template v-if="!username">
              <el-dropdown-item icon="el-icon-user" command="login">登录</el-dropdown-item>
              <el-dropdown-item icon="el-icon-setting" command="manage">后台登录</el-dropdown-item>
            </template>
            <template v-if="username && !admin">
              <el-dropdown-item icon="el-icon-shopping-cart-2" command="cart">购物车</el-dropdown-item>
              <el-dropdown-item icon="el-icon-location-outline" command="address">地址管理</el-dropdown-item>
              <el-dropdown-item icon="el-icon-s-order" command="orders">我的订单</el-dropdown-item>
            </template>
            <el-dropdown-item icon="el-icon-s-tools" command="manage-pane" v-if="username && admin">后台管理</el-dropdown-item>
            <el-dropdown-item icon="el-icon-user-solid" command="logout" v-if="username">登出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {mapState} from "vuex";
import Cookies from 'js-cookie'
import axios from "axios";

export default {
  name: "EsHeader",
  data() {
    return {
      search: ""
    }
  },
  methods: {
    startSearch() {
      if (this.search)
        this.$router.push(`/search/${this.search}`)
    },
    logout() {
      let loading = this.$loading({
        fullscreen: true,
        lock: true
      })
      axios.get('/api/account/logout')
          .then(() => {
            this.$message({
              type: "success",
              message: "登出成功"
            });
            loading.close();
            this.$store.commit("setIsAdmin", false);
            this.$store.commit("setUsername", '');
            Cookies.remove('sessionID');
            this.goToHome();
          })
          .catch(e => {
            if (e.response) {
              this.$message({
                message: `未知的服务器错误, 代码 ${e.response.status}`,
                type: "error"
              })
              loading.close()
            } else {
              this.$message({
                message: "未知的错误",
                type: "error"
              })
              loading.close()
            }
          })
    },
    commandHandle(command) {
      switch (command) {
        case 'login':
          this.$router.push('/login')
          break
        case 'manage':
          this.$router.push('/manager/login')
          break
        case 'cart':
          this.$router.push('/cart')
          break
        case 'address':
          this.$router.push('/address')
          break
        case 'orders':
          this.$router.push('/orders')
          break
        case 'manage-pane':
          this.$router.push('/manager');
          break;
        case 'logout':
          this.logout()
          break
      }
    },
    goToHome() {
      if (this.$route.path !== '/') {
        this.$router.replace('/')
      }
    }
  },
  computed: mapState({
    admin: 'admin',
    username: 'username'
  }),
  mounted() {
    let canvas = this.$refs.canvas.getContext("2d")
    canvas.font = "24px serif";
    canvas.textAlign = "center"
    canvas.fillStyle = "#FFFFFF"
    canvas.fillText("E-SHOP  易书网", 125, 30);
  }
}
</script>

<style scoped>
.header {
  background-color: #409eff;
  border-radius: 5px;
  /*height: 100%;*/
  padding: 10px 0;
}

.grid-content {
  min-height: 36px;
}

.avatar {
  transform: translateY(2px);
}

#back {
  margin-left: 20px;
  transform: scale(1.5, 1.5);
}
</style>